.root {
  --burger-size-xs: 12px;
  --burger-size-sm: 18px;
  --burger-size-md: 24px;
  --burger-size-lg: 34px;
  --burger-size-xl: 42px;

  --burger-size: var(--burger-size-md);
  --burger-line-size: calc(var(--burger-size) / 12);

  width: calc(var(--burger-size) + var(--mantine-spacing-xs));
  height: calc(var(--burger-size) + var(--mantine-spacing-xs));
  padding: calc(var(--mantine-spacing-xs) / 2);
  cursor: pointer;

  @mixin where-light {
    --burger-color: var(--mantine-color-black);
  }

  @mixin where-dark {
    --burger-color: var(--mantine-color-white);
  }
}

.burger {
  position: relative;
  user-select: none;

  &,
  &::before,
  &::after {
    display: block;
    width: var(--burger-size);
    height: var(--burger-line-size);
    background-color: var(--burger-color);
    outline: 1px solid transparent;
    transition-property: background-color, transform;
    transition-duration: var(--burger-transition-duration, 300ms);
    transition-timing-function: var(--burger-transition-timing-function, ease);
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    inset-inline-start: 0;
  }

  &::before {
    top: calc(var(--burger-size) / -3);
  }

  &::after {
    top: calc(var(--burger-size) / 3);
  }

  &[data-opened] {
    background-color: transparent;

    &::before {
      transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg);
    }

    &::after {
      transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
    }
  }
}
